<template>
  <div class="movie">
    <h1>我需要的电影列表是长度是3-7之间的</h1>
    <ul>
        <li v-for="item in myMovieList" :key="item.tvId">{{item.albumName}}</li>
    </ul>
    <hr/>
    <h1>传参的getters</h1>
    <ul>
        <li v-for="item in yourMovieList" :key="item.tvId">{{item.albumName}}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name:"Movie",
    computed:{
        //第一种拿getters返回值的方法
        // myMovieList(){
        //     return this.$store.getters.myMovieList
        // }
        //第二种
        ...mapGetters(["myMovieList"]),
        // 需要传参的getters
        //因为getter返回的如果是一个函数的话,我们可能需要传参,就不要使用mapGetters
        // getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果
        yourMovieList(){
                return this.$store.getters.yourMovieList({
                    start:2,
                    end:8
                })
        }

    }
}
</script>

<style>
.movie{
    background-color:rgb(144, 247, 27);
    text-align: center;
}
</style>